<template>
  <el-row>
    <BtnRender :render="renderBtnsBar" />
    <SkusTable
      ref="tableRef"
      :showSelectCol="showSelectCol"
      :showPagination="showPagination"
      :showActionCol="showActionCol"
      :loading="TableInfo.loading"
      :data-source="TableInfo.list"
      :columns="TableInfo.columns"
      :selectionChange="TableInfo.setSelection"
      :selectSelection="selectSelection"
      :total="total"
      :pageSizes="pageSizes"
      :pagination="pagination"
      :actionRender="actionRender"
      :tableRowClassName="setTableRowClassName"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
    />
  </el-row>
</template>
<script>
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import skusPage from '@/mixins/commodity/skusPage';
import { TableInfo } from '@/utils/getUtils';
export default {
  mixins: [skusPage],
  components: {
    SkusTable,
    BtnRender
  },
  props: {
    // 当前所在tab名
    nativeName: {
      type: String,
      default: ''
    },
    // 表格列集合
    columns: {
      type: Array,
      default: () => []
    },
    // 获取表格数据方法
    fetchList: {
      type: Function,
      default: () => {}
    },
    // 是否展示勾选列
    showSelectCol: {
      type: Boolean,
      default: false
    },
    // 是否展示操作列
    showActionCol: {
      type: Boolean,
      default: false
    },
    // 是否展示分页
    showPagination: {
      type: Boolean,
      default: true
    },
    // 操作列渲染函数
    actionRender: {
      type: Function,
      default: () => {}
    },
    // 表格按钮操作栏
    btnsRender: {
      type: Function,
      default: () => {}
    },
    // 表格单个勾选操作
    onSelectSelection: {
      type: Function,
    },
  },
  data () {
    return {
      TableInfo: new TableInfo(),
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 1000 // 当前页码size
      },
      pageSizes: [1000]
    }
  },
  watch: {
    nativeName: {
      handler () {
        this.updateTableList()
        this.TableInfo.setColumns(this.columns)
      },
      immediate: true
    },
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      return this.btnsRender(h, this.TableInfo)
    },
    // 更新表格集合数据
    updateTableList () {
      this.setNowPage(1)
      this.getTableData()
    },
    // 获取表格数据
    async getTableData () {
      const data = {
        ...this.paginationParams,
        contentType: this.nativeName ?? this.$attrs?.nativeName ?? '',
        recordNo: this.$route?.query?.recordNo,
      }
      const res = await this.fetchList(data, this.TableInfo.setLoading)
      this.TableInfo.setList(res?.results ?? [])
      this.setTotalNum(res?.totalNum ?? 0)
      this.TableInfo.setColumns(this.columns)
    },
    setTableRowClassName ({ row }) {
      const colorMaps = this.getTableColors() ?? {}
      return colorMaps[row.spuNo] ?? ''
    },
    // 获取表格对应spuNo行颜色
    getTableColors () {
      const colors = ['warning-row', 'success-row']
      const spuNos = _.uniq(this.TableInfo.list.map(item => item.spuNo))
      // 只有一个spuNo时，不实现行颜色渲染
      if (spuNos.length == 1) {
        const spuNo = spuNos[0]
        const colorMaps = { [spuNo]: '' }
        return colorMaps
      }
      const colorMaps = spuNos.reduce((value, spuNo, index) => {
        value[spuNo] = index % 2 == 0 ? colors[0] : colors[1]
        return value
      }, {})
      return colorMaps
    },
    // 勾选当前选项
    selectSelection (selection, row) {
      const ischecked = selection.some(item => item.skuNo == row.skuNo)
      if (!this.onSelectSelection) return
      this.onSelectSelection(this.TableInfo, {
        refs: this.$refs.tableRef.$refs.plTable.$refs.singleTable,
        row,
        ischecked
      })
    },
  }
}
</script>
